import React from 'react';
import ReactDom from 'react-dom';
import './propMarket.scss';
import { api } from 'js/api/api';
import Button from 'views/component/button/button';
import utils from 'js/core/utils';

class Main extends React.Component {
    constructor() {
        super()
        this.state = {
            selectItemId: null
        }
    }
    componentDidMount() {
    }
    select = (itemId) => {
        this.setState({ selectItemId: itemId })
    }
    close = () => {
        this.props.close();
    }
    shopBuy = (itemId) => {
        api('shopBuy', { itemId: parseInt(itemId) }, () => {
            this.setState({})
        })
    }
    render() {
        let { selectItemId } = this.state;
        let townBuildingId = window.totalConfig.base.townBuildingId;
        let propName = window.propName;
        let townBuildingConfig = window.totalConfig.townBuilding[townBuildingId];
        let itemList = townBuildingConfig.shop.itemList;
        let itemListNode = [], itemInfo = [];
        for (let [itemId, item] of Object.entries(itemList)) {
            itemListNode.push(<div className={"item flex " + (selectItemId === itemId ? 'active' : '')} key={itemId} onClick={() => { this.select(itemId) }}>
                <div className="name">{propName[itemId]}</div>
                <div className="gold">金币x{item}</div>
            </div>)
        }
        if (selectItemId) {
            itemInfo = <div>
                <div className="name">{propName[selectItemId]}</div>
                <div className="handle">
                    <Button onClick={() => { this.shopBuy(selectItemId) }}>购买</Button>
                </div>
            </div>
        }
        return <div id="propMarket" className="flex-col">
            <div className="propMarket-body">
                <div className="boss">
                    店铺老板
                </div>
                <div className="propMarket-content">
                    <div className="flex commodity-title">
                        <div className="item">杂货</div>
                        <div className="item">神秘商品</div>
                    </div>
                    <div className="flex">
                        <div className="commodity-list">
                            {itemListNode}
                        </div>
                        <div className="commodity-info">
                            {itemInfo}
                        </div>
                    </div>
                </div>
                <div className="bottom">
                    <Button onClick={this.close}>离开</Button>
                </div>
            </div>
        </div>
    }
}

export default Main;